<!--
 * @Author: ZCL
 * @Date: 2020-05-21 14:41:58
 * @LastEditors: ZCL
 * @LastEditTime: 2020-05-21 14:41:58
-->
<template>
  <!-- 我(部门)领用的耗材 -->
  <div class="myConsumable">

    <!-- 部门 -->
    <div class="pb-10" v-if="$type === $const.COMMON_TYPES.DEPARTMENT">
      <van-cell title="部门名称:" is-link :value="department_name" @click="openDepartment" />
      <van-action-sheet
        v-model="show"
        :actions="departmentList"
        cancel-text="取消"
        @cancel="onCancel"
        @select="selectDepartment"
      />
    </div>

    <!-- 列表 start -->
    <div>
      <van-list
        v-if="myConsumableList.length"
        v-model="loading"
        :finished="!canLoadMore"
        finished-text="- 我是有底线的 -"
        @load="getConsumableList"
        :offset="num"
      >
        <div>
          <div class="box" v-for="(item,index) in myConsumableList" :key="index">
            <div class="left">
              <van-image
                width="85px"
                height="85px"
                :src="item.image_url"
              />
            </div>
            <div class="right">
              <p class="text">{{ item.c_name }}</p>
              <div>编码: {{ item.c_code }} <span class="ml-15">型号: {{ item.c_specs }}</span></div>
              <div>领用时间: {{ item.create_time }} </div>
              <div>领用数量: {{ item.re_num }}{{ item.c_unit }} <span class="ml-15">单价: {{ item.c_unit_price }} 元</span></div>
            </div>
          </div>
        </div>
      </van-list>
      <van-empty
        v-if="!myConsumableList.length"
        class="custom-image"
        :image="require('@/assets/icon/empty2.png')"
        description="暂无记录"
      />
    </div>
    <!-- 列表 end -->

  </div>
</template>

<script>
import titleMixins from '@/mixins/title';

export default {
  name: 'MyConsumable',
  mixins: [titleMixins],
  data () {
    return {
      page: 1,
      num: 10,
      loading: false, // 是否处于加载状态
      canLoadMore: true, // 是否已加载完成
      myConsumableList: [], // 我的耗材列表
      show: false, // 部门上拉框展开
      department_name: this.$store.getters.departmentList[0].department_name, // 选中部门显示名
      dept_id: this.$store.getters.departmentList[0].dept_id, // 选中部门id
      departmentList: [] // 部门列表
    };
  },
  methods: {
    // 获取我的/部门耗材列表
    getConsumableList () {
      this.loading = true;
      // 获取我的耗材列表
      if (this.$type === this.$const.COMMON_TYPES.MY) {
        let params = {
          page: this.page,
          num: this.num
        };
        this.$api.getReceiceMyConsumable(params).then(res => {
          this.loading = false;
          if (res.code === 0) {
            this.myConsumableList = [...this.myConsumableList, ...res.result.data];
            this.totalPage = Number(res.result.last_page);
            this.page++;
            if (this.page > this.totalPage) {
              this.canLoadMore = false;
            }
          }
        });
        // 获取部门耗材列表
      } else if (this.$type === this.$const.COMMON_TYPES.DEPARTMENT) {
        let params = {
          page: this.page,
          num: this.num,
          dept_id: this.dept_id
        };
        this.$api.getReceiceDeptConsumable(params).then(res => {
          this.loading = false;
          if (res.code === 0) {
            this.myConsumableList = [...this.myConsumableList, ...res.result.data];
            this.totalPage = Number(res.result.last_page);
            this.page++;
            if (this.page > this.totalPage) {
              this.canLoadMore = false;
            }
          }
        });
      }
    },
    // 获取部门信息
    handleGetDepartment () {
      this.departmentList = this.$store.getters.departmentList.map(item => ({
        ...item,
        name: item.department_name
      }));
    },
    // 打开选择部门上拉框
    openDepartment () {
      this.show = !this.show;
    },
    // 选择部门
    selectDepartment (item) {
      this.department_name = item.department_name;
      this.dept_id = item.dept_id;
      this.show = false;
      this.reSet();
      this.getConsumableList();// 获取我的/部门耗材列表
    },
    // 部门上拉框取消
    onCancel () {
      this.show = false;
      this.$toast('已取消');
    },
    // 重置
    reSet () {
      this.page = 1;
      this.myConsumableList = [];
    }
  },
  created () {
    this.handleGetDepartment();// 获取部门信息
    this.getConsumableList();// 获取我的/部门耗材列表
  }
};
</script>

<style lang="scss" scoped>
.myConsumable {
  padding-top: 10px;
  ::v-deep.van-empty__description {
    margin-top: 0;
  }
  // 列表
  .box {
    display: flex;
    background-color: #fff;
    padding: 15px;
    margin-bottom: 10px;
    .left {
      margin-right: 14px;
    }
    .right {
      font-size: 12px;
      color: #BBBBBB;
      line-height: 22px;
      .text {
        font-size: 14px;
        color: #020202;
        padding-top: 3px;
      }
    }
  }
}
</style>
